<template>
  <div>
    <div class="homesearch" v-if="dataList.hots">
      <div class="search">
        <input
          class="searchipt"
          type="text"
          v-model.trim="value"
          @change="iptvalue"
          placeholder="搜索歌曲、歌手、专辑"
          ref="searchinput"
          @keyup.enter="search(value)"
        />
      </div>
      <RecomTitle v-if="!searchshow && !resshow">热门搜索</RecomTitle>
      <ul class="hotsearch" v-if="dataList.hots && !searchshow && !resshow">
        <li
          @click="
            cliserch($event);
            search(item.first);
          "
          v-for="(item, index) in dataList.hots"
          :key="index"
        >
          {{ item.first }}
        </li>
      </ul>
      <ul v-if="searchshow && !resshow" class="searchul">
        <div class="namena">搜索“{{ value }}”</div>
        <li
          v-for="item in searchlist"
          :key="item.id"
          @click="search(item.name)"
        >
          <span class="sericon"></span>
          <p>{{ name }} {{ item.name }}</p>
        </li>
      </ul>
      <ul class="history" v-if="!searchshow && !resshow">
        <li v-for="(item, index) in historylist" :key="index">
          <span class="iconhis"><i class="iconfont icon-lishi"></i></span>
          <div class="right">
            <span @click="search(item)">{{ item }}</span
            ><i class="iconfont icon-shanchu1" @click="removehis(item)"></i>
          </div>
        </li>
      </ul>
      <RecomTitle v-if="resshow">最佳匹配</RecomTitle>
      <SouSuo
        @songlistdetail="$emit('songlistdetail', $event)"
        @update:currentSong="$emit('update:currentSong', $event)"
        @songerIndex="songerIndex"
        v-if="resshow && searchshow"
        :resList="resList"
        :resSong="resSong"
        :currentSong="currentSong"
        :playing="playing"
        @update:songermsg="
          $emit('update:songermsg', $event);
          songermsg = $event;
        "
      ></SouSuo>
    </div>
    <loadingView v-else></loadingView>
  </div>
</template>

<script>
import RecomTitle from "@/components/RecomTitle.vue";
import SouSuo from "@/components/SouSuo.vue";
import loadingView from "@/components/LoadingView.vue";

export default {
  props: {
    currentSong: Object,
    playing: Boolean,
  },
  components: {
    RecomTitle,
    SouSuo,
    loadingView,
  },
  data: function () {
    return {
      dataList: {},
      value: "",
      searchshow: false,
      resshow: false,
      searchlist: null,
      name: "",
      resList: {},
      resSong: [],
      songerIndexShow: false,
      songermsg: {},
      historylist: [],
    };
  },
  methods: {
    songerIndex: function () {
      this.$router.push({ path: "/songerdetail" });
    },
    search: function (name) {
      console.log("调用了");
      this.resshow = true;
      this.value=name
      this.axios
        .get(
          `https://apis.netstart.cn/music/search/multimatch?keywords=${name}`
        )
        .then((res) => {
          this.resList = res.data.result;
        });
      this.axios
        .get(`https://apis.netstart.cn/music/cloudsearch?keywords=${name}`)
        .then((res) => {
          this.resSong = res.data.result.songs;
        });
      this.$store.commit({ type: "addSearchHisList", value: name });
      this.historylist = JSON.parse(window.localStorage.getItem("searchHisList"));
    },
    removehis:function(value){
      this.$store.commit({ type: "removeSearchHisList", value: value });
      this.historylist = JSON.parse(window.localStorage.getItem("searchHisList"));
    },
    iptvalue: function (n) {
      if (this.value != "") {
        this.searchshow = true;
      } else {
        this.searchshow = false;
        return;
      }
      this.axios
        .get(`https://apis.netstart.cn/music/search/suggest?keywords=${n}`)
        .then((res) => {
          if (res.data.result.songs) {
            this.searchlist = res.data.result.songs;
            this.name = res.data.result.artists[0].name;
          } else {
            this.searchlist = [{ name: "没有搜索到结果(；′⌒`)" }];
          }
        });
    },
    cliserch: function (eve) {
      this.resshow = true;
      this.$refs.searchinput.value = eve.target.innerText;
      this.value = eve.target.innerText;
      console.log("点击了");
    },
  },
  created: function () {
    this.axios.get("https://apis.netstart.cn/music/search/hot").then((res) => {
      this.dataList = res.data.result;
    });
    this.historylist = JSON.parse(window.localStorage.getItem("searchHisList"));
  },
  watch: {
    value: function (n) {
      return this.iptvalue(n);
    },
  },
};
</script>

<style lang="less" scoped>
.homesearch {
  background-color: #fff;
  padding: 10px 5px;
  .search {
    .searchipt {
      width: 100%;
      height: 30px;
      border: none;
      outline: none;
      background-color: #ebecec;
      border-radius: 30px;
      position: relative;
      padding-left: 30px;
      margin: 0px 0px 10px 0px;
      &::placeholder {
        color: #bbbcbc;
      }
      &::before {
        content: "";
        width: 20px;
        background-image: url(../assets/search.png);
        height: 20px;
        top: 10px;
        left: 20px;
        position: absolute;
      }
    }
  }
  .hotsearch {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    li {
      padding: 5px 10px;
      border: 1px solid #aaa;
      margin: 5px;
      border-radius: 40px;
    }
  }
  .searchul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    .namena {
      min-height: 50px;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    div {
      width: 100%;
      border-top: 1px solid #f6f7f8;
      border-bottom: 1px solid #f6f7f8;
      color: #507daf;
    }
    li {
      width: 90%;
      height: 45px;
      line-height: 45px;
      border-bottom: 0.5px solid #f6f7f8;
      position: relative;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sericon {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 14px;
        left: -32px;
        background: url(../assets/search.png) no-repeat center;
      }
    }
  }
  .history {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 14px;
    li {
      width: 100%;
      height: 45px;
      margin-right: -5px;
      display: flex;
      justify-content: space-between;

      .iconhis {
        align-self: center;
        i {
          font-size: 20px;
          color: #d6d7d7;
        }
      }
      .right {
        width: 90%;
        display: flex;
        border-bottom: 1px solid #f1f2f3;
        padding: 0 20px 0 0;
        align-items: center;
        span {
          flex: 1;
        }
        i {
          color: #d6d7d7;
          font-size: 10px;
        }
      }
    }
  }
}
</style>